<template>
  <div>
    <popup-down v-model="provinceShow" :target-id="targetProvince" ref="province">
      <transition name="showlist">
        <group class="area-group mescroll-touch" v-show="provinceShow">
          <radio :options="provinceData" @on-change="provinceChange"></radio>
        </group>
      </transition>
    </popup-down>
    <popup-down v-model="cityShow" :target-id="targetCity" ref="city">
      <transition name="showlist">
        <group class="area-group mescroll-touch" v-show="cityShow">
          <radio :options="cityData" @on-change="cityChange"></radio>
        </group>
      </transition>

    </popup-down>
    <popup-down v-model="countyShow" :target-id="targetCounty" ref="county">
      <transition name="showlist">
        <group class="area-group mescroll-touch" v-show="countyShow">
          <radio :options="countyData" @on-change="countyChange"></radio>
        </group>
      </transition>
    </popup-down>
    <loading :show="loading"></loading>
  </div>
</template>

<script>
  import {getArea} from '../../api/data/path'
  import popupDown from '../../components/popdown/popupDown'
  import { Radio} from 'vux'

  export default {
    name: "areaSelectPopDown",
    props:{
      targetProvince:String,
      targetCity:String,
      targetCounty:String,
      getAreaFunc:{
        type:Function,
        default:getArea
      }
    },
    data() {
      return {
        provinceShow: false,
        cityShow:false,
        countyShow:false,
        show:this.value,
        loading: false,
        provinceData:[],
        cityData:[],
        countyData:[],
        areaSelected:{
          provinceId:null,
          provinceName:null,
          cityId:null,
          cityName:null,
          countyId:null,
          countyName:null
        }
      }
    },
    watch: {
    },
    components: {popupDown,Radio},
    computed: {},
    methods: {
     /* onUpdatePosition(){
        this.$refs.province.updatePosition()
        this.$refs.city.updatePosition()
        this.$refs.county.updatePosition()
      },*/
      emitEvent(){
        this.$emit('on-area-change',this.areaSelected)
      },
      onToggle(target){
        switch (target){
          case "province":
            if(!this.provinceShow){
              this.onHide()
              this.provinceShow=true
              return
            }
            this.onHide()
            break
          case "city":
            if(!this.cityShow){
              this.onHide()
              if(this.isEmptyObject(this.cityData)){
                this.$vux.toast.text('请先选择省份')
                return
              }
              this.cityShow=true
              return
            }
            this.onHide()
            break
          case "county":
            if(!this.countyShow){
              this.onHide()
              if(this.isEmptyObject(this.countyData)){
                this.$vux.toast.text('请先选择城市')
                return
              }
              this.countyShow=true
              return
            }
            this.onHide()
            break
        }
      },
      onHide(){
        this.provinceShow=false
        this.cityShow=false
        this.countyShow=false
      },
      provinceChange(value, label){
        if(value===0){
          this.cityData=[]
          this.areaSelected={}
        }else{
          this.areaSelected={
            provinceId:value,
            provinceName:label
          }
          this.getArea('city',value)
        }
        this.onHide()
        this.countyData=[]
        this.emitEvent()
      },
      cityChange(value, label) {
        if (value===0){
          this.countyData=[]
          this.areaSelected.cityId=null
          this.areaSelected.cityName=null
          this.areaSelected.countyId=null
          this.areaSelected.countyName=null
        } else{
          this.areaSelected.cityId=value
          this.areaSelected.cityName=label
          this.areaSelected.countyId=null
          this.areaSelected.countyName=null
          this.getArea('county',value)
        }
        this.onHide()
        this.emitEvent()
      },
      countyChange(value, label) {
        if (value===0){
          this.areaSelected.countyId=null
          this.areaSelected.countyName=null
        }else{
          this.areaSelected.countyId=value
          this.areaSelected.countyName=label
        }
        this.onHide()
        this.emitEvent()
      },
      async getArea(target,pid){
        if (!target)
          target = 'province'
        this.loading = true
        let result = await this.getAreaFunc({target: target, parentId: pid})
        this.loading = false
        switch (target) {
          case 'province':
            this.provinceData = [{
              key:0,
              value:'全部'
            }]
            if(result.data){
              result.data.map(item => {
                this.provinceData.push({
                  key: item.provinceId,
                  value: item.provinceName
                })
              })
            }

            break
          case 'city':
            this.cityData = [{
              key:0,
              value:'全部'
            }]
            if(result.data){
              result.data.map(item => {
                this.cityData.push({
                  key: item.cityId,
                  value: item.cityName
                })
              })
            }

            break
          case 'county':
            this.countyData = [{
              key:0,
              value:'全部'
            }]
            if(result.data){
              result.data.map(item => {
                this.countyData.push({
                  key: item.countyId,
                  value: item.countyName
                })
              })
            }

            break
        }
      }
    },
    created() {

    },
    mounted() {
      this.getArea(this.target)
    }
  }
</script>

<style scoped lang="less">
  .area-group{
    background: #fff;height: 7rem;overflow: auto;
    position: fixed;
    top: 2.27rem;
    width: 100%;
    z-index: 503;
    /deep/.weui-cells:before {
     display: none!important;
    }
    /deep/.vux-no-group-title {
      /* margin-top: 0.77em; */
    }
    /deep/.weui-cells {
       margin-top: 0!important;
    }
  }

  .showlist-enter-active,
  .showlist-leave-active {
    transition: all 0.3s;
    transform: translateY(0%);

  }

  .showlist-enter,
  .showlist-leave-active {
    opacity: 100;
    transform: translateY(-100%);
  }
</style>
